<template>
  <div class="content-body" :style="borderStyle">
    <div class="query-custom">
      <div class="query-body" :class="focus === true ? 'active' : ''">
        <input
          v-model="form.blurry"
          class="query-input"
          :style="borderStyle"
          autocomplete="off"
          placeholder="快速探索 Tsinghua University"
          @focus="userFocusin"
          @blur="userFocusout"
        >
        <span
          class="query-button"
          @click="search"
        ><i
          class="el-icon-search"
        /></span>
      </div>
    </div>
    <div v-if="isShow" class="query-item">
      <query-list
        v-for="item in column.query"
        :key="item.sjx"
        :sjx="item"
        @callBack="queryBack"
      />
    </div>
    <div class="content-ul">
      <div
        v-for="(item, index) in dataList"
        :key="'server-' + index"
        class="custom-right-li"
        @click="openEntity(item)"
      >
        <el-card shadow="hover" style="height: 100%" :style="borderStyle">
          <div class="right-li-body">
            <div class="custom-li-image">
              <el-image
                lazy
                class="custom-image"
                :src="item[column['image']]"
              />
            </div>
            <div class="custom-li-title">
              <div class="li-line">{{ item[column["title"]] }}</div>
              <div class="li-line custom-font">
                {{
                  item[column["left1"]] +
                    "/" +
                    item[column["left2"]] +
                    "/" +
                    item[column["left3"]]
                }}
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { more, openEntity } from '@/mixins/template';
import QueryList from './common/queryList';
export default {
  name: 'PcMoreImageListTempV2Vue',
  components: { QueryList },
  mixins: [more, openEntity],
  props: {
    temp: {
      type: Object,
      default: () => {
        return {};
      }
    },
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    borderStyle() {
      if (this.temp.sfxsbk === true) {
        return {
          backgroundColor: this.customStyle.mrzt,
          opacity: this.customStyle.tmd,
          color: this.customStyle.fontColor
        };
      }
      if (this.temp.bkyy === true) {
        return {
          backgroundColor: this.customStyle.mrzt,
          opacity: this.customStyle.tmd,
          color: this.customStyle.fontColor
        };
      }
      return {
        backgroundColor: this.customStyle.mrzt,
        opacity: this.customStyle.tmd,
        color: this.customStyle.fontColor
      };
    }
  },
  watch: {
    layout: {
      handler(newData, oldData) {
        this.customStyle = newData;
        this.titleStyle = {
          backgroundColor: newData.mrlb,
          opacity: newData.tmd
        };
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    temp: {
      handler(newName, oldName) {
        // 值发生变化时
        if (undefined !== newName && newName !== null) {
          this.column = JSON.parse(newName.pzx);
          this.setting = this.column;
          if (
            this.column.query !== undefined &&
            this.column.query !== null &&
            this.column.query.length > 0
          ) {
            this.isShow = true;
            this.column.query.forEach(item => {
              this.form[item.column] = null;
            });
          } else {
            this.isShow = false;
          }
          this.form.cid = newName.id;
          this.initData();
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  }
};
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  padding: 20px 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
}
.query-custom {
  width: 100%;
  height: 70px;
  flex: 0 1 auto;
  padding: 10px 20%;
  box-sizing: border-box;
}
.query-item {
  width: 100%;
  min-height: 40px;
  border-bottom: 1px solid #dcdfe6;
}
.content-ul {
  width: 100%;
  height: inherit;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  min-height: 600px;
}
.query-body {
  width: 100%;
  height: 100%;
  display: flex;
  line-height: 50px;
  flex-flow: row nowrap;
  border: 1px solid #dcdfe6;
  border-radius: 25px;
  padding: 5px 60px 5px 25px;
  box-sizing: border-box;
  position: relative;
}
.active {
  border: 1px solid #409eff;
}
.query-input,
.query-input:focus {
  border: none;
  width: 100%;
  outline: none;
}
.query-button {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 60px;
  height: 50px;
  line-height: 50px;
  border-radius: 0px 25px 25px 0px;
  background-color: #4a98f6;
  text-align: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 25px;
  font-weight: bolder;
}
.query-button:hover {
  background-color: #66b1ff;
}
.custom-right-li {
  cursor: pointer;
}
.right-li-body {
  width: 100%;
  height: 70px;
  display: flex;
  flex-flow: row nowrap;
}
.custom-li-title {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-content: flex-start;
  padding: 5px 0px;
  box-sizing: border-box;
}
.custom-image {
  width: 40px;
}
.custom-font {
  font-size: 12px;
  color: #dcdfe6;
}
.li-line {
  flex: 0 1 auto;
  height: 50%;
  padding: 5px;
  box-sizing: border-box;
  text-align: left;
}
/**
屏幕大于 1200px
 */
@media screen and (min-width: 1200px) {
  .custom-right-li {
    width: 20%;
    height: 100px;
    align-content: flex-start;
    padding: 10px 5px;
    box-sizing: border-box;
  }
  .custom-li-image {
    flex: 0 1 auto;
    width: 60px;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  .el-card >>> .el-card__body {
    padding: 5px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .custom-right-li {
    width: 25%;
    height: 100px;
    align-content: flex-start;
    padding: 10px 5px;
    box-sizing: border-box;
  }
  .custom-li-image {
    flex: 0 1 auto;
    width: 60px;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  .el-card >>> .el-card__body {
    padding: 5px;
  }
}

@media screen and (max-width: 1024px) {
  .custom-right-li {
    width: 33.33%;
    height: 100px;
    align-content: flex-start;
    padding: 10px 5px;
    box-sizing: border-box;
  }
  .custom-li-image {
    flex: 0 1 auto;
    width: 60px;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  .el-card >>> .el-card__body {
    padding: 5px;
  }
}
</style>
